<template>
  <v-dialog v-model="restartServiceDialog" scrollable persistent max-width="1200px" :fullscreen="$vuetify.breakpoint.xsOnly">
    <v-card>
      <v-card-title>
        <span class="headline">{{ name }}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="px-0 py-0">
        <v-tabs v-model="active" color="cyan" dark slider-color="yellow" >
          <v-tab v-for="n in info" :key="n.hostname" ripple >
            <v-badge v-model="show" color="success">
              <v-icon slot="badge" :class="n.alive" dark small>{{ n.alive }}</v-icon>
              {{ n.hostname }}
            </v-badge>
          </v-tab>
          <v-tab-item v-for="n in info" :key="n.hostname" >
            <v-card flat>
              <v-card-text>
                <v-textarea label="response" outline rows="18" :value="fmt(n.result)"></v-textarea>
              </v-card-text>
            </v-card>
          </v-tab-item>
        </v-tabs>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-text>
        <v-flex xs12 sm12 md12>
          <v-autocomplete :items="host.items" v-model="fields.host" item-text="text" multiple chips
                    :rules="hostRules" item-value="value" label="启停主机" autocomplete ></v-autocomplete>
        </v-flex>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="error" @click.native="openVerify('stop')" small><h4>停服</h4></v-btn>
        <v-btn color="info" @click.native="openVerify('start')" small><h4>启服</h4></v-btn>
        <v-btn color="primary" @click.native="closeRestartService" small><h4>关闭</h4></v-btn>
      </v-card-actions>
    </v-card>
    <verify :vcodeDialog = "vcodeDialog" @upVerify="verifyResult"
            :verifyTitle="verifyTitle" @clsVerify="closeVerifyDialog"></verify>
  </v-dialog>
</template>

<script>
import {getFormatData} from '../../utils/common'
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('restartService')
export default {
  name: 'restartService',
  data: function () {
    return this.$store.state.restartService
  },
  props: {
    restartServiceDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: null
    }
  },
  methods: {
    ...mapActions([
      'loadSelect',
      'restartService',
      'loadRestartInfo',
      'openVerify'
    ]),
    closeRestartService () {
      this.$emit('clsRestartDialog')
    },
    fmt (result) {
      return getFormatData(result)
    },
    verifyResult () {
      this.restartService({id: this.pid, cmd: this.recentCmd})
    },
    closeVerifyDialog () {
      this.vcodeDialog = false
    }
  },
  watch: {
    restartServiceDialog () {
      if (this.restartServiceDialog) {
        this.loadSelect(this.pid)
        this.loadRestartInfo(this.pid)
      } else {
        clearInterval(this.interval)
        this.info = []
      }
    }
  },
  components: {
    verify: () => import('../../components/verify/verify')
  }
}
</script>

<style scoped>

</style>
